import React from 'react';
import {
  Form,
  Drawer,
  Table,
} from 'antd';

import DescriptionList from '@/components/DescriptionList';

const { Description } = DescriptionList;

//查看详情
const DescView = Form.create()(props => {
  const { lookDescView, handleLookDesc, selectedRows } = props;
  console.log(selectedRows);
  const typeList = [
    {
      key: 1,
      value: '保守型',
    },
    {
      key: 2,
      value: '稳健型',
    },
    {
      key: 3,
      value: '积极型',
    },
  ];
  const columns = [
    {
      title: '用户编号',
      dataIndex: 'userNo',
      key: 'userNo',
    },
    {
      title: '用户名称',
      dataIndex: 'userName',
      key: 'userName',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: (val) => {
        return typeList.map(item => {
          if (val === item.key) {
            return item.value;
          }
        });
      },
    },
    {
      title: '评测时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
  ];

  return (
    <Drawer
      destroyOnClose
      width={700}
      title="查看风险评测信息"
      visible={lookDescView}
      onClose={() => handleLookDesc(false, [])}>
      <DescriptionList size="large" style={{ marginBottom: 32 }} col="2">
        <Description term="累计待收">{selectedRows.receive}</Description>
        <Description term="累计出借">{selectedRows.amount}</Description>
        <Description term="手机号">{selectedRows.mobile}</Description>
        <Description term="再投项目">{selectedRows.projectNum}</Description>
      </DescriptionList>
      <Description term="历史记录">
        <Table columns={columns} pagination={false}
               dataSource={selectedRows.list}/>
      </Description>
    </Drawer>
  );
});

export default DescView;
